<template>
  <div>
    <br><br>
    <!-- 搜索部分 -->
    <el-button type="primary" @click="merchantadd">添加商家</el-button>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    <el-input
      fixed="right"
      v-model="list.merchantName"
      placeholder="请输入聚合名称"
      style="width: 200px"
    />
    <el-button  @click="getlist()" :icon="Search" circle />
  </div>
  <div><br>
    <!-- 显示部分 -->
  <el-table :data="tableData" style="width: 100%">
    <el-table-column prop="merchantName" label="商家名称" width="180" />
    <el-table-column prop="createTime" label="创建时间" width="180">
      <template #default="scope">
        {{ scope.row.createTime.substring(0,10) }}
      </template>
    </el-table-column>
    <el-table-column prop="merchantPhone" label="商户手机号" width="180" />
    <el-table-column prop="merchantAdder" label="地址" width="180" />
    <el-table-column prop="merchantDesc" label="备注" width="180" />
    <el-table-column label="操作列" min-width="180">
      <template #default="{row}">
        <el-button link type="primary" size="small" @click="updateClick(row)">
          编辑
        </el-button>
        <el-button link type="primary" size="small" @click="deletedclick(row.id)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>

<!-- 弹窗添加 -->
  <el-dialog v-model="dialogFormVisible" title="新增商户" width="500">
    <el-form :model="form">
      <el-form-item label="商户名称" :label-width="100">
        <el-input v-model="form.merchantName" autocomplete="off" />
      </el-form-item>
      <el-form-item label="商户地址" :label-width="100">
        <el-input v-model="form.merchantAdder" autocomplete="off" />
      </el-form-item>
      <el-form-item label="商户手机号" :label-width="100">
        <el-input v-model="form.merchantPhone" autocomplete="off" />
      </el-form-item>
      <el-form-item label="备注" :label-width="100">
      <el-input v-model="form.merchantDesc" type="textarea" />
    </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="merchantadds()">
          确认新增
        </el-button>
      </div>
    </template>
  </el-dialog>


  <!-- 弹窗修改 -->
  <el-dialog v-model="dialogFormVisibles" title="新增商户" width="500">
    <el-form :model="forms">
      <el-form-item label="商户名称" :label-width="100">
        <el-input v-model="forms.merchantName" autocomplete="off" />
      </el-form-item>
      <el-form-item label="商户地址" :label-width="100">
        <el-input v-model="forms.merchantAdder" autocomplete="off" />
      </el-form-item>
      <el-form-item label="商户手机号" :label-width="100">
        <el-input v-model="forms.merchantPhone" autocomplete="off" />
      </el-form-item>
      <el-form-item label="备注" :label-width="100">
      <el-input v-model="forms.merchantDesc" type="textarea" />
    </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="merchantupdates()">
          确认修改
        </el-button>
      </div>
    </template>
  </el-dialog>


</div>
</template>

<script lang="ts" setup>
import { reactive,ref,onMounted} from 'vue'
import { ElMessage } from 'element-plus'
import axios from 'axios'
import { useRouter } from 'vue-router'
import {Search} from '@element-plus/icons-vue'
const router = useRouter()


const dialogFormVisible = ref(false)
const dialogFormVisibles = ref(false)
const tableData = ref([])
const list=ref({
  merchantName:""
})

//新增
const form=reactive({
  merchantName:"",
  merchantAdder:"",
  merchantPhone:"",
  merchantDesc:""
})

//修改
const forms=reactive({
  id:"",
  merchantName:"",
  merchantAdder:"",
  merchantPhone:"",
  merchantDesc:""
})


//生命周期函数
onMounted(()=>{
  getlist()
})

//获取数据
const getlist = () => {
  axios({
    url:"https://localhost:44392/GetMerchantManagement",
    method:"get",
    params:list.value
  }).then(res=>{
    tableData.value=res.data.data
  })
}


//新增按钮
const merchantadd=()=>{
  dialogFormVisible.value=true
}

//确认新增按钮
const merchantadds=()=>{
   axios({
    url:"https://localhost:44392/PostMerchantManagement",
    method:"post",
    data:form
   }).then(res=>{
    if(res.data.code==200){
      ElMessage({
        message: '添加成功',
        type: 'success',
      })
      dialogFormVisible.value=false
      getlist()
    }else{
      ElMessage({
        message: '添加失败',
        type: 'error',
      })
    }
   })
}


//编辑按钮(回显)
const updateClick=(row:any)=>{
  console.log(row)
  dialogFormVisibles.value=true
  forms.id=row.id
  forms.merchantName=row.merchantName
  forms.merchantAdder=row.merchantAdder
  forms.merchantPhone=row.merchantPhone
  forms.merchantDesc=row.merchantDesc
}


//确认编辑按钮
const merchantupdates=()=>{
  axios({
    url:"https://localhost:44392/PutMerchantManagement",
    method:"put",
    data:forms
  }).then(res=>{
    if(res.data.code==200){
      ElMessage({
        message: '修改成功',
        type: 'success',
      })
      dialogFormVisibles.value=false
      getlist()
    }else
    {
      ElMessage({
        message: '修改失败',
        type: 'error',
      })
    }
  })
}


const deletedclick=(id:any)=>{
  axios({
    url:"https://localhost:44392/DeleteMerchantManagement",
    method:"delete",
    params:{id:id}
  }).then(res=>{
    if(res.data.code==200){
      ElMessage({
        message: '删除成功',
        type: 'success',
      })
      getlist()
    }else{
      ElMessage({
        message: '删除失败',
        type: 'error',
      })
    }
  })
}

</script>